<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>
 Overview
</TITLE>
<LINK REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">
<SCRIPT>
function asd()
{
parent.document.title=" Overview";
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_top"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=2 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_top_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  
  
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-summary.html"><FONT CLASS="NavBarFont1"><b>Overview</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev">	&nbsp;<FONT CLASS="NavBarFont1Rev"><b>File</b></FONT>&nbsp;</TD>
  

  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1"> 	<FONT CLASS="NavBarFont1">Class</FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-tree.html"><FONT CLASS="NavBarFont1"><b>Tree</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="index-all.html"--><FONT CLASS="NavBarFont1"><b>Index</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="help-doc.html"><FONT CLASS="NavBarFont1"><b>Help</b></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD BGCOLOR="#EEEEFF" ALIGN="right" VALIGN="top">
<EM>
<b></b></EM>
</TD>
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="overview-summary.html" TARGET="_top"><B>NO FRAMES</B></A>
&nbsp;&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
</TABLE>
<!-- =========== END OF NAVBAR =========== -->

<HR>
<CENTER>

   <H2>animation.js</H2>

</CENTER>
        
            
        
        
        <h4>Summary</h4>
        <p>
        
           No overview generated for 'animation.js'<BR/><BR/>
           
        </p>

<HR>


    <TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
    <TR BGCOLOR="#CCCCFF" CLASS="TableHeadingColor">
    <TD COLSPAN=2><FONT SIZE="+2">
    
        <B>Class Summary</B>
    
    </FONT></TD>
    </TR>
    
    <TR BGCOLOR="white" CLASS="TableRowColor">
    <TD WIDTH="15%"><B><A HREF="Animation.html">Animation</A></B></TD>
    <TD>&nbsp;</TD>
    </TR>
    
    </TABLE>
    <HR/> 





<!-- START SOURCECODE -->
<pre class="sourceview">
var OW_Animation=
{
  time: 15,
  timer: new <span class="reserved">function</span>()
  {
    var store=[];
    var run=false;
    var interval=0;
    var goStep=<span class="reserved">function</span>()
    {
      var i=0, noFn=true;
      <span class="reserved">for</span>(i=0; i&lt;store.length; i++) 
      {
        <span class="reserved">if</span>(store[i]) 
        {
          store[i]();
          noFn=false;
        }
      }
      <span class="reserved">if</span>(noFn) stop();
    }
    var stop=<span class="reserved">function</span>()
    {
      clearInterval(interval);
      run=false;
    }
    var start=<span class="reserved">function</span>()
    {
      interval=setInterval(goStep, OW_Animation.time);
      run=true;
    }
    <span class="reserved">this</span>.set=<span class="reserved">function</span>(fn)
    {
      var i=0;
      <span class="reserved">while</span>(store[i]) i++;
      store[i]=fn;
      <span class="reserved">if</span>(!run) start();
      <span class="reserved">return</span> i;
    }
    <span class="reserved">this</span>.clear=<span class="reserved">function</span>(index)
    {
      store[index]=null;
    }
  }
};

<span class="comment">/** 
 * To create a animation object.
 * A animation has a counter which will run from 0 to 100. 
 * All properties which are added with a start and a end value will
 * be adjusted relative to that counter. 
 * <span class="attrib">@constructor</span> 
 */</span>

<span class="reserved">function</span> Animation(element, speed, onstart, onfinish, accelerationProfile)
{
  var self=<span class="reserved">this</span>;
  var currentStragedy=null;
  <span class="comment">/** <span class="attrib">@private</span> */</span>
  <span class="reserved">this</span>.properties=[];
  <span class="comment">/** <span class="attrib">@private</span> */</span>
  <span class="reserved">this</span>.current=0;
  <span class="comment">/** <span class="attrib">@private</span> */</span>
  <span class="reserved">this</span>.interval=0;
  <span class="comment">/** <span class="attrib">@private</span> */</span>
  <span class="reserved">this</span>._isrunning=false;

  <span class="comment">/** pointer to style object */</span>
  <span class="reserved">this</span>.style=element.style;
  <span class="comment">/** pointer to element on which the animation is created */</span>
  <span class="reserved">this</span>.element=element;
  <span class="comment">/** the default speed in 	percents */</span>
  <span class="reserved">this</span>.speed=speed||<span class="reserved">this</span>.speed;
  <span class="comment">/** a callback which will be called befor the animation starts */</span>
  <span class="reserved">this</span>.onstart=onstart||null;
  <span class="comment">/** a callback which will be called when the animation finishes */</span>
  <span class="reserved">this</span>.onfinish=onfinish||null;
  <span class="comment">/** a profile for the speed during the animation */</span>
  <span class="reserved">this</span>.accelerationProfile=accelerationProfile||<span class="reserved">this</span>.constant;


};

<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.reTestHex=/^#/;
<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.convertToRGB=<span class="reserved">function</span>(string)
{
  <span class="reserved">if</span>(<span class="reserved">this</span>.reTestHex.test(string))
  {
    var r=0, g=0, b=0, rgb=[], i=0;
    string=string.slice(1);
    <span class="reserved">if</span>(string.length==3)
    {
      r=string.slice(0,1);
      r+=r;
      g=string.slice(1,2);
      g+=g;
      b=string.slice(2,3);
      b+=b;
    }
    <span class="reserved">else</span>
    {
      r=string.slice(0,2);
      g=string.slice(2,4);
      b=string.slice(4,6);
    }
    <span class="reserved">return</span> [parseInt(r,16), parseInt(g,16), parseInt(b,16)];
  }
  <span class="reserved">else</span>
  {
    rgb=string.slice(string.indexOf(<span class="literal">'('</span>)+1,string.indexOf(<span class="literal">')'</span>)).split(<span class="literal">','</span>);
    <span class="reserved">for</span>( ; i&lt;3; i++) rgb[i]=parseInt(rgb[i]);
    <span class="reserved">return</span> rgb;
  }

}
<span class="comment">/* default speed for a animation i persents */</span>
Animation.<span class="reserved">prototype</span>.speed=6;

<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.reIsColor=/^#|^rgb/;
<span class="comment">/** the default acceleration profile */</span>
Animation.<span class="reserved">prototype</span>.constant=<span class="reserved">function</span>(x)
{
  <span class="reserved">return</span> 1;
}
<span class="comment">/** a acceleration profile which will start slow, accelerate and slow done to the end */</span>  
Animation.<span class="reserved">prototype</span>.sine=<span class="reserved">function</span>(x)
{
  var sin=Math.sin;
  var pi=Math.PI;
  var start=.2;
  <span class="reserved">return</span> (sin((x)/100*pi))+start;
}
<span class="comment">/** a acceleration profile which will start slow and then accelerate */</span> 
Animation.<span class="reserved">prototype</span>.accelerate=<span class="reserved">function</span>(x)
{
  var start=.1;
  <span class="reserved">return</span> start+x*x/100000;
}

<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.stragedyInt=<span class="reserved">function</span>(prop, current)
{
  <span class="reserved">return</span> (prop.from+(Math.round(prop.delta*current/100)))+prop.unit;
}

<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.stragedyFloat=<span class="reserved">function</span>(prop, current)
{
  <span class="reserved">return</span> (prop.from+prop.delta*current/100);
}

<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.stragedyColor=<span class="reserved">function</span>(prop, current)
{
  var i=0, temp=[];
  <span class="reserved">for</span>( ; i&lt;3; i++) temp[i]=prop.fromRGB[i]+(Math.round(prop.deltaRGB[i]*current/100));
  <span class="reserved">return</span> <span class="literal">'rgb('</span>+temp.join(<span class="literal">','</span>)+<span class="literal">')'</span>;
}

<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.getProperty=<span class="reserved">function</span>(property)
{
  var i=0, pointer=null;
  <span class="reserved">for</span>( ; pointer=<span class="reserved">this</span>.properties[i]; i++)
  {
    <span class="reserved">if</span>(property==pointer.property) <span class="reserved">return</span> pointer;
  }
  <span class="reserved">return</span> null;
}

<span class="comment">/** to check if the animation is running */</span>
Animation.<span class="reserved">prototype</span>.checkRun=<span class="reserved">function</span>()
{
  <span class="reserved">return</span> <span class="reserved">this</span>._isrunning;
}

<span class="comment">/** to start the animation */</span>
Animation.<span class="reserved">prototype</span>.run=<span class="reserved">function</span>()
{
  var self=<span class="reserved">this</span>;
  <span class="reserved">if</span>(!<span class="reserved">this</span>._isrunning)
  { 
    <span class="reserved">this</span>._isrunning=true;
    <span class="reserved">if</span>(<span class="reserved">this</span>.onstart) <span class="reserved">this</span>.onstart();
    <span class="reserved">this</span>.interval=OW_Animation.timer.set(<span class="reserved">function</span>(){self.onStep()}); 
  }
}

<span class="comment">/** <span class="attrib">@private</span> */</span>
Animation.<span class="reserved">prototype</span>.onStep=<span class="reserved">function</span>()
{
  var last=false;
  var temp=null;
  <span class="reserved">if</span>((<span class="reserved">this</span>.current+=<span class="reserved">this</span>.speed*<span class="reserved">this</span>.accelerationProfile(<span class="reserved">this</span>.current))&gt;=100)
  {
    <span class="reserved">this</span>.current=100;
    OW_Animation.timer.clear(<span class="reserved">this</span>.interval);
    last=true;
  };
  var i=0, prop=null;
  
  <span class="reserved">for</span> ( ; prop=<span class="reserved">this</span>.properties[i]; i++)
  {
    <span class="reserved">this</span>.style[prop.property]=prop.stragedy(prop, <span class="reserved">this</span>.current);
  }
  <span class="reserved">if</span>(last)
  {
    <span class="reserved">this</span>.current=0;
    <span class="reserved">this</span>._isrunning=false;
    var event=document.createEvent(<span class="literal">'Event'</span>);
    event.initEvent(<span class="literal">'OWAnimationDone'</span>, true, false);
    event.data=<span class="reserved">this</span>;
    <span class="reserved">this</span>.element.dispatchEvent(event);
    <span class="reserved">if</span>(<span class="reserved">this</span>.onfinish) <span class="reserved">this</span>.onfinish();
  }
}

<span class="comment">/** 
  * to add a animation for a certain property.
  * <span class="attrib">@param</span> property the property which shall be animated
  * <span class="attrib">@param</span> from the start value as string
  * <span class="attrib">@param</span> to the end value as string
  */</span>
Animation.<span class="reserved">prototype</span>.addAnimation=<span class="reserved">function</span>(property, from, to)
{
  var strat=null, unit=<span class="literal">''</span>, delta=0;
  var pointer_here=<span class="reserved">this</span>.getProperty(property)||(<span class="reserved">this</span>.properties[<span class="reserved">this</span>.properties.length]={});
  <span class="reserved">if</span>(<span class="reserved">this</span>.reIsColor.test(from))
  {
    pointer_here.property=property;
    pointer_here.from=from;
    pointer_here.to=to;
    pointer_here.fromRGB=<span class="reserved">this</span>.convertToRGB(from);
    pointer_here.toRGB=<span class="reserved">this</span>.convertToRGB(to);
    pointer_here.deltaRGB=
    [
      (pointer_here.toRGB[0]-pointer_here.fromRGB[0]), 
      (pointer_here.toRGB[1]-pointer_here.fromRGB[1]), 
      (pointer_here.toRGB[2]-pointer_here.fromRGB[2])
    ];
    pointer_here.stragedy=<span class="reserved">this</span>.stragedyColor;
  }
  <span class="reserved">else</span>
  {
    <span class="reserved">if</span>(property==<span class="literal">'opacity'</span>)
    {
      strat=<span class="reserved">this</span>.stragedyFloat;
      from=parseFloat(from);
      to=parseFloat(to);
    }
    <span class="reserved">else</span>
    {
      strat=<span class="reserved">this</span>.stragedyInt;
      unit=from.replace(/-?\d*/g,<span class="literal">''</span>);
      from=parseInt(from);
      to=parseInt(to);
    }
    pointer_here.property=property;
    pointer_here.unit=unit;
    pointer_here.from=from;
    pointer_here.to=to;
    pointer_here.delta=to-from;
    pointer_here.stragedy=strat;
  }
  <span class="reserved">return</span> <span class="reserved">this</span>;
}

<span class="comment">/** 
  * to create a animation.
  * <span class="attrib">@param</span> speed
  * <span class="attrib">@param</span> onfinish
  * <span class="attrib">@param</span> accelerationProfile
  * <span class="attrib">@returns</span> a animation object
  * <span class="attrib">@see</span> Animation
  */</span>
HTMLElement.<span class="reserved">prototype</span>.createAnimation=<span class="reserved">function</span>(speed, onfinish, accelerationProfile)
{
  <span class="reserved">return</span> new Animation(<span class="reserved">this</span>, speed, onfinish, accelerationProfile); 
}

</pre>
<!-- END SOURCECODE -->
<HR>




<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_top"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=2 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_top_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  
  
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-summary.html"><FONT CLASS="NavBarFont1"><b>Overview</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev">	&nbsp;<FONT CLASS="NavBarFont1Rev"><b>File</b></FONT>&nbsp;</TD>
  

  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1"> <FONT CLASS="NavBarFont1">Class</FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-tree.html"><FONT CLASS="NavBarFont1"><b>Tree</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="index-all.html"--><FONT CLASS="NavBarFont1"><b>Index</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="help-doc.html"><FONT CLASS="NavBarFont1"><b>Help</b></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD BGCOLOR="#EEEEFF" ALIGN="right" VALIGN="top"><EM>
<b></b></EM>
</TD>
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="overview-summary.html" TARGET="_top"><B>NO FRAMES</B></A>
&nbsp;&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
</TABLE>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<FONT SIZE="-1">

</FONT>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Wed Jan 25 16:46:53 2006</div>
</BODY>
</HTML>
